<template>
  <div class="statis-box">
    <div class="statis-header">{{ title }}</div>
    <div id="holiday" class="statis-main"></div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, onMounted } from 'vue';
  import { useI18n } from '@common/locales';
  import * as echarts from 'echarts';
  export default defineComponent({
    name: 'HolidayStatis',
    setup() {
      const t = useI18n().t;
      const state = {
        title: t('workBoard.holidayStatis'),
      };
      const methods = {
        initChart() {
          let holidayDom = document.getElementById('holiday');
          var myEchart = echarts.init(holidayDom);
          myEchart.clear();
          let option = {
            tooltip: {
              trigger: 'axis',
            },
            color: ['rgb(0, 143, 255)', 'rgb(255, 91, 91)', 'rgb(45, 197, 91)'],
            legend: {
              data: ['请假人天', '加班人天', '出差人天'],
            },
            grid: {
              top: '30',
              left: '25',
              right: '30',
              bottom: '5%',
              containLabel: true,
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月',
              ],
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                name: '请假人天',
                type: 'line',
                smooth: true,
                data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290],
              },
              {
                name: '加班人天',
                type: 'line',
                smooth: true,
                data: [220, 182, 191, 234, 290, 330, 310, 150, 232, 201, 154, 190],
              },
              {
                name: '出差人天',
                type: 'line',
                smooth: true,
                data: [150, 232, 201, 154, 190, 330, 410, 120, 132, 101, 134, 90],
              },
            ],
          };
          option && myEchart.setOption(option);
          // window.addEventListener('resize', () => {
          //   myEchart.resize();
          // });
        },
      };
      onMounted(() => {
        methods.initChart();
      });
      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .statis-box {
    width: 615px;
    height: 370px;
    border-radius: 4px;
    background-color: #ffffff;
    .statis-header {
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      font-size: 16px;
      font-weight: bold;
      color: #3f3f3f;
    }
    .statis-main {
      width: 615px;
      height: 310px;
    }
  }
</style>
